/*
    index.html文件的打包（也就是发布）
*/

const path = require('path');
const uglify = require('uglifyjs-webpack-plugin'); // 代码压缩，不需安装就可使用
const htmlPlugin = require('html-webpack-plugin'); // 用来打包index.html文件，需要npm install --save-dev html-webpack-plugin，才能使用

module.exports = {
    entry: { // 入口配置项
        file01: './src/entry01.js' // 多入口文件1，file1可以任意写
    },
    output: { // 出口配置项
        path: path.resolve(__dirname, 'dist'), // 绝对路径，注1
        filename: '[name].js' // 多出口文件名,动态[name]的值呼应entry选项里的entry1和entry2。这里的出口文件不是针对index.html
    },
    module: { // 打包css、图片转换、压缩，把sass转换为css、es6转换为浏览器兼容的代码、react的语法转换成js代码
        rules: [
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
                
            }
        ]
    },
    plugins: [ // 插件
        new htmlPlugin({ // 注1
            minify: { // 压缩
                removeAttributeQuotes: true // 删除index.html打包后的单引号和双引号。但是检查元素里的节点，无论怎么弄都是双引号
            },
            hash: true, // 打包后的index.html中的资源引用加上hash防止缓存，就是防止改完js、css文件运行后不起效果
            template: './src/index1.html' // 指定index.html模版。即便这里的index.html重命名成任意名称，但打包后的依旧是index.html
        }),
        new uglify() // 不压缩index.html
    ],
    devServer: { // 开发服务(开发环境)
        contentBase: path.resolve(__dirname, 'dist'), // 热更新，监听资源绝对路径
        host: '192.168.31.163', // 服务器地址
        compress: true, // 启用服务器压缩
        port: 1717 // 端口，可以任意取
    }
}

/*
    笔记：
        前几节课我们的知识储备不够，手动复制index.html到dist/下，实际打包执行完命令后把index.html、css、js一起打包到dist/下，
        如何输出index.html呢？安装html-webpack-plugin插件吧，安装后需要引入、配置；

        使用webpack打包，打包后dist/下自动添加<script>,并且添加了hash防缓存；

    注1：
        htmlPlugin插件打包index.html，能自动引用dist/下的脚本文件;

        index.html中的img标签内的src属性值写成 ./asset/imgs/dog-year.png 或 asset/imgs/dog-year.png，打包后都变成<img src="asset/imgs/4acf50940ecfa2c04723b5530159a04c.png">,
        但不能写成./asset/imgs/dog-year.png，这样找不到路径;

*/